<script setup lang="ts">
import { getMusicListItem } from "@/apis/music/list";
import { getMusicLyric, getMusicUrl } from "@/apis/music/player";
import { useMusicStore } from "@/stores/music";
import { ref, watch } from "vue";
import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
import { getArtistAllMusic } from "@/apis/artist/artist";
import { getAlbumDetail } from "@/apis/album/album";
const musicListLimit = ref(10);
const store = useMusicStore();
const musicListOffset = ref(0);
const musicListItem = ref<any[]>([]);
const props = defineProps(["musicListId", "artistId"]);

watch([() => props.artistId, () => props.musicListId], async () => {
  musicListItem.value = [];
  if (props.musicListId) {
    const musicItem = await getMusicListItem({
      id: props.musicListId,
      limit: musicListLimit.value,
      offset: musicListOffset.value,
    });
    musicItem.data.songs.forEach((item) => {
      musicListItem.value.push(item);
    });
  } else if (props.artistId) {
    const res = await getArtistAllMusic({
      id: props.artistId,
      limit: musicListLimit.value,
      offset: musicListOffset.value,
    });
    musicListItem.value = res.data.songs;
    musicListItem.value.forEach(async (item, index) => {
      //   musicListItem.value.push(item);
      const albumDetail = await getAlbumDetail({ id: item.al.id });
      musicListItem.value[index].al.picUrl = albumDetail.data.album.picUrl;
    });
  }
});
const addMusicList = async (item: any) => {
  const res = await getMusicUrl({ id: item.id });
  const musicLyric = await getMusicLyric({ id: item.id });
  store.waitMusicLyric.push(musicLyric.data.lrc.lyric);
  store.waitPlayMusic.push(res.data.data[0]);
  store.waitMusicPic.push(item.al.picUrl);
  store.WaitMusicInfo.push(item);
};

const loading = ref(true);
const noData = ref(false);
const loadMusicList = async () => {
  if (props.musicListId) {
    musicListLimit.value += 10;
    musicListOffset.value += 10;
    const newMusicList = await getMusicListItem({
      id: props.musicListId,
      limit: musicListLimit.value,
      offset: musicListOffset.value,
    });
    if (newMusicList.data.songs.length === 0) {
      noData.value = true;
      return;
    }
    newMusicList.data.songs.forEach((item) => {
      musicListItem.value.push(item);
    });
  } else if (props.artistId) {
    musicListLimit.value += 10;
    musicListOffset.value += 10;
    const res = await getArtistAllMusic({
      id: props.artistId,
      limit: musicListLimit.value,
      offset: musicListOffset.value,
    });
    if (res.data.songs.length === 0) {
      noData.value = true;
      return;
    }
    res.data.songs.forEach((item) => {
      musicListItem.value.push(item);
    });
    musicListItem.value.forEach(async (item, index) => {
      //   musicListItem.value.push(item);
      const albumDetail = await getAlbumDetail({ id: item.al.id });
      musicListItem.value[index].al.picUrl = albumDetail.data.album.picUrl;
    });
  }
};
const playNowMusic = async (id: number, picUrl: string) => {
  const musicUrl = await getMusicUrl({ id });
  const musicLyric = await getMusicLyric({ id });
  store.musicData = musicUrl.data.data[0];
  store.isPlayer = !store.isPlayer;
  store.musicPicUrl = picUrl;
  store.getMusicLyric = musicLyric.data.lrc.lyric;
};
</script>
<template>
  <el-table
    :data="musicListItem"
    stripe
    style="width: 100%"
    v-el-table-infinite-scroll="loadMusicList"
    class="MusicList"
  >
    <el-table-column label=" " width="100">
      <template #default="scoped">
        <img
          :src="scoped.row.al.picUrl"
          alt=""
          style="width: 80%; height: 80%; border-radius: 50%"
        />
      </template>
    </el-table-column>
    <el-table-column prop="name" label="歌曲" width="200" />
    <el-table-column label="歌手" width="180">
      <template #default="scope"
        ><span v-for="item in scope.row.ar">{{ item.name }} </span></template
      >
    </el-table-column>
    <el-table-column label="专辑">
      <template #default="scoped">
        <span>
          {{ scoped.row.al.name }}
        </span>
      </template>
    </el-table-column>
    <el-table-column>
      <template #default="scoped">
        <el-icon
          @click="playNowMusic(scoped.row.id, scoped.row.al.picUrl)"
          color="#f50a0a"
          ><CaretRight
        /></el-icon>
        <el-dropdown placement="top" trigger="click">
          <el-icon color="#00ffb3" ref="moreRef"><More /></el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="addMusicList(scoped.row)"
                >添加到播放列表</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </el-table-column>
  </el-table>
</template>
<style scoped lang="scss">
.el-table__body .el-icon {
  font-size: 25px;
}
</style>
